<template>
  <div class="container_detail team-edit">
    <div class="header">
      <p>团建管理>{{id?'团建编辑':'添加团建'}}</p>
      <el-button class="link" type="primary">
        <router-link :to="{path:'teamList',query: { pageIndex: currentPage }}" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <el-form
        :model="user"
        :rules="rules"
        ref="user"
        label-width="150px"
        class=""
      >
       <el-form-item
          label="团建名："
          prop="title"
        >
           <el-input
              v-model="user.title"
              placeholder="请输入"
            ></el-input>
        </el-form-item>
        <el-form-item
          label="团建封面："
          prop="imageKey"
        >
          <el-upload
            class="avatar-uploader"
            :action="upLoadUrl"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload1"
           >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            >
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="团建介绍："
          prop="userName"
        >
            <bg-editor
                :minHeight="300"
                :uploadUrl="upLoadUrl"
                :content="user.detail"
                @editorData='editorInfo'
            >
            </bg-editor>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSave('user')"
            style="margin-left:150px"
          >保存</el-button>
          <el-button class="link" type="primary">
            <router-link :to="{path:'teamList',query: { pageIndex: currentPage }}" style="color: #fff;">返回</router-link>
        </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");

export default {
  data() {
    return {
      id: "",
      info: "",
      // 返回 导航页码
      currentPage: 1,
      dialogVisible: false,
      pictureUrl: "",
      user: {
        "detail": "",
        "id": "",
        "title": ""
     },
      rules: {
        title: [{ required: true, message: "请输入团建名", trigger: "blur" }],
        detail: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ]
      },
      imageUrl:'',
      upLoadUrl:'',
      content:""
    };
  },
  mounted() {
    this.id = this.$router.currentRoute.query.id;
    this.currentPage = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
      let sessionId = sessionStorage.getItem("sessionId");
      this.upLoadUrl =
      CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS + "?sessionId=" + sessionId;
    if(this.id){
      this.getDetail();
    }
  },
  components: {
    "bg-editor": () => import("../common/bg-editor.vue")
  },
  methods: {
      editorInfo(e) {
        this.user.detail = e
        },
      handleImageRemove(file, fileList) {
        let list = []
        fileList.map((item, index) => {
          this.fileList.map((item1, index1) => {
            if (item.url == item1.url) {
              list.push(item1)
            }
          })
        })
        this.fileList = list
      },
      beforeAvatarUpload1(file) {
        let url = CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS;
        let param = {
          suffix: file.name.split(".")[1], // 文件后缀  png
          contentType: file.type // 文件类型  image/png
        };
        console.log(param,'')
        common.requestAjax(url, null, param, res => {
            console.log(res,'eeeeeee')
          this.upLoadUrl = res.data.bussData.uploadUrl;
          common.uploadFile(this.upLoadUrl, file, file.type, res1 => {
           this.imageUrl = res.data.bussData.downloadUrl
           this.user.photoIds = res.data.bussData.fileKey
          })
        });
      },
    setPassword(){
        this.user.psw = 123456
        this.user.psw2 = 123456
    },
    getBrandList: function() {
      let url = CONSTANT.URL.LIST.findEsBrandByPage;
      let data = {
        pageIndex:1,
        pageSize: 1000
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data;
        this.brandArr = data.bussData;
      });
    },
     getDetail() {
      let url = CONSTANT.URL.LIST.findEsTeamById;
      let data = { id: this.id }
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData;
        this.user = {
          detail: data.detail,
          id:data.id,
          title: data.title,
          photoIds:data.images[0].fileKey
        }
          this.imageUrl = data.images[0].fileUrl
          $('#summernote').summernote('code',data.detail)
      });
    },
    checkImage(url) {
      this.pictureUrl = url;
      this.dialogVisible = true;
    },
    handleSave: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = CONSTANT.URL.LIST.saveEsTeam;
          common.requestAjax(url, JSON.stringify(this.user), null, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.$router.push({
                path: "/teamList",
                query: { pageIndex: this.currentPage }
              });
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.team-edit {
  .el-form-item {

    
  }
    .el-input {
      width:220px;
    }
    .el-select {
      width: 220px;
      .el-input {
        width: 100%;
      }
    }

  .item-value {
    .el-input {
      width:220px;
    }
    .el-select {
      width: 220px;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>

